<template>
  <Dialog title="添加标签" v-model="dialogVisible" width="400">
    <div>
      <el-select multiple v-model="tagValue" class="w-100%" placeholder="请选择标签">
        <template v-for="group in tagMap" :key="group.name">
          <el-option disabled :label="group.name" :value="null" class="group-title" />
          <el-option
            v-for="item in group.labelList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <el-tag :style="{ background: item.bgColor, color: item.textColor }">{{
              item.name
            }}</el-tag>
          </el-option>
        </template>
      </el-select>
    </div>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" :disabled="loading" @click="submit">确 定</el-button>
    </template>
  </Dialog>
</template>
<script setup>
import * as customerTagApi from '@/api/crm/customerTagConfig/index'
const props = defineProps({
  pageType: String
})
const dialogVisible = ref(false)
const tagValue = ref('')
const tagMap = ref([])
/**标签列表*/
const getTagList = async () => {
  const { list } = await customerTagApi.getCustomerTagPage()
  tagMap.value = list
}
const loading = ref(false)
const ids = ref([])
const open = (val) => {
  dialogVisible.value = true
  ids.value = val
  tagValue.value = ''
  getTagList()
}
const emit = defineEmits(['success'])
defineExpose({ open })
/**提交*/
const submit = async () => {
  try {
    loading.value = true
    let obj = {
      labelList: tagValue.value
    }
    if (props.pageType == 'customer') {
      obj.customerIdList = ids.value
      await customerTagApi.batchCustomerUpdateLabel(obj)
    } else {
      obj.clueIdList = ids.value
      await customerTagApi.batchUpdateLabel(obj)
    }
    ElMessage.success('操作成功')
    emit('success')
    dialogVisible.value = false
  } finally {
    loading.value = false
    dialogVisible.value = false
  }
}
</script>
<style scoped></style>
